<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-table</title>
	</head>
	<body>
		<div class="demo-main">
			<div class="admim-title">
				<h2>Table 表格</h2>
				<p>用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</p>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础表格</h3>
					<p>基础的表格展示用法。</p>
				</div>
				<div class="content">
					<table id="table" class="qx-table"></table>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>带斑马纹表格</h3>
					<p>使用带斑马纹的表格，可以更容易区分出不同行的数据。</p>
				</div>
				<div class="content">
					<table id="table2" class="qx-table"></table>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>带边框表格</h3>
				</div>
				<div class="content">
					<table id="table3" class="qx-table"></table>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>带折叠表格</h3>
				</div>
				<div class="content">
					<div class="qx-header">
						<div class="left">
							<div class="page-title">标签分类</div>
							<qx-form>
								<qx-form-item prop="input">
									<qx-input
										name="tags"
										name="keyword"
										placeholder="请输入标签分类名"
										size="mini"
									></qx-input>
									<qx-button type="warning" icon="icon-seekicon" size="mini"></qx-button>
								</qx-form-item>
							</qx-form>
						</div>
						<div class="right">
							<qx-button type="primary" class="remove" icon="icon-add" size="small">全选</qx-button>
							<qx-button type="warning" class="remove" icon="icon-remove" size="small">
								批量删除
							</qx-button>
							<qx-button type="warning" class="add" icon="icon-retract" size="small">
								全部折叠
							</qx-button>
							<qx-button type="warning" class="refresh" icon="icon-fileopen" size="small">
								全部展开
							</qx-button>
						</div>
					</div>
					<table id="table4" class="qx-table"></table>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Table Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>titles</td>
						<td>数据格式结构</td>
						<td>array</td>
						<td>—</td>
						<td>[]</td>
					</tr>
					<tr>
						<td>data</td>
						<td>数据列表</td>
						<td>array</td>
						<td>—</td>
						<td>[]</td>
					</tr>
					<tr>
						<td>border</td>
						<td>带边框表格</td>
						<td>string</td>
						<td>qx-border</td>
						<td>—</td>
					</tr>
					<tr>
						<td>evenRowClass</td>
						<td>表格偶数行样式</td>
						<td>string</td>
						<td>qx-evenRow</td>
						<td>—</td>
					</tr>
					<tr>
						<td>oddRowClass</td>
						<td>表格奇数行样式</td>
						<td>string</td>
						<td>qx-oddRow</td>
						<td>—</td>
					</tr>
					<tr>
						<td>curRowClass</td>
						<td>表格hover样式</td>
						<td>string</td>
						<td>qx-curRow</td>
						<td>qx-curRow</td>
					</tr>
					<tr>
						<td>overflowHeight</td>
						<td>出现滚动条的高度</td>
						<td>string</td>
						<td>—</td>
						<td>260px</td>
					</tr>
				</tbody>
			</table>
			<h2>Table Data</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>checked</td>
						<td>是否checkbox默认选中</td>
						<td>number | string</td>
						<td>—</td>
						<td>0</td>
					</tr>
					<tr>
						<td>disabled</td>
						<td>是否禁用操作，也支持默认传字符串HTML添加disabled类</td>
						<td>number | boolean</td>
						<td>—</td>
						<td>false</td>
					</tr>
					<tr>
						<td>pid</td>
						<td>父级ID，id=0则为一级，否则二级以上（仅折叠有效）</td>
						<td>number</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>cid</td>
						<td>分类ID，二级分类则有子级（三级）</td>
						<td>number</td>
						<td>—</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
			<h2>Table Event</h2>
			<table>
				<thead>
					<tr>
						<td>事件名称</td>
						<td>说明</td>
						<td>回调参数</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>checked</td>
						<td>监听获取当前选择的元素ID</td>
						<td>Array</td>
					</tr>
					<tr>
						<td>switch</td>
						<td>监听获取当前开关的元素ID</td>
						<td>Object</td>
					</tr>
					<tr>
						<td>event</td>
						<td>监听监听自定义函数</td>
						<td>Object</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			// checked=1 默认选中
			var data = [
				{
					id: '1',
					disabled: true,
					checked: '1',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '7hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: true,
					control: [{ id: 1001, type: '超级管理员' }]
				},
				{
					id: '2',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '7hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					control: [{ id: 1001, type: '超级管理员' }]
				},
				{
					id: '3',
					disabled: true,
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '7hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					control: [{ id: 1001, type: '超级管理员' }]
				},
				{
					id: '4',
					checked: '1',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '7hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					control: [{ id: 1001, type: '超级管理员' }]
				}
			]

			/**
			 * pid: 为零一级；否则二级/三级
			 * cid: 一级分类ID并且有三级（子级）
			 */

			var data2 = [
				{
					id: '1',
					disabled: true,
					disabled2: true,
					pid: '0',
					checked: '1',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '1hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: true,
					apply: true,
					control:
						"<i data-event='edit' class='iconfont icon-edits disabled'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '2',
					pid: '1',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '2hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					apply: false,
					control:
						"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '3',
					pid: '1',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '3hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					apply: false,
					control:
						"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '4',
					pid: '1',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '4hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					apply: false,
					control:
						"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '5',
					disabled: true,
					pid: '0',
					checked: '1',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '5hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: true,
					apply: true,
					control:
						"<i data-event='edit' class='iconfont icon-edits disabled'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '6',
					pid: '5',
					cid: '5',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '6hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					apply: false,
					control:
						"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '8',
					pid: '6',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '8hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					apply: false,
					control:
						"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '7',
					pid: '5',
					cid: '5',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '7hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					apply: false,
					control:
						"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				},
				{
					id: '9',
					pid: '7',
					img: '<img src="https://www.baidu.com/img/bd_logo1.png" />',
					name: '9hit',
					email: 'G2@1235.cc',
					role: '信息部',
					add_time: '2019-05-06 10:39:18',
					status: false,
					apply: false,
					control:
						"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
				}
			]

			$('#table').table({
				// evenRowClass:'qx-evenRow',//表格偶数行样式
				// oddRowClass:'qx-oddRow',//表格奇数行样式
				curRowClass: 'qx-curRow', //表格hover样式
				overflowHeight: '250px', //出现滚动条的高度
				titles: [
					{
						title: 'ID',
						keyName: 'id',
						width: 80,
						checkBox: false // checkbox 复选框
					},
					{
						title: '头像',
						keyName: 'img'
					},
					{
						title: '登录名',
						keyName: 'name'
					},
					{
						title: '邮箱',
						keyName: 'email'
					},
					{
						title: '角色',
						keyName: 'role'
					},
					{
						title: '加入时间',
						keyName: 'add_time'
					},
					{
						title: '状态',
						keyName: 'status',
						switch: true, // switch 开关
						disabled: 'disabled', // disabled 禁用字段
						width: 100
					},
					{
						title: '操作', // 标题
						keyName: 'control', // 一维数组字段
						width: 100, // TD宽度
						keysName: 'type', // 二维数组字段
						disabled: 'disabled', // disabled 禁用字段
						default: '' // 默认值
					}
				],
				switch(e) {
					// 内置监听switch事件
					console.log(e)
				},
				event(e) {
					// 自定义事件监听
					console.log(e)
				},
				data
			})

			// 带斑马纹
			$('#table2').table({
				evenRowClass: 'qx-evenRow', //表格偶数行样式
				oddRowClass: 'qx-oddRow', //表格奇数行样式
				curRowClass: 'qx-curRow', //表格hover样式
				overflowHeight: '260px', //出现滚动条的高度
				titles: [
					{
						title: 'id',
						keyName: 'id',
						width: 80,
						checkBox: true
					},
					{
						title: '登录名',
						keyName: 'name'
					},
					{
						title: '邮箱',
						keyName: 'email'
					},
					{
						title: '角色',
						keyName: 'role'
					},
					{
						title: '加入时间',
						keyName: 'add_time'
					},
					{
						title: '状态',
						keyName: 'status',
						switch: true,
						width: 150
					},
					{
						title: '操作',
						keyName: 'control',
						width: 150,
						keysName: 'type', // 二维数组字段
						default:
							"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
					}
				],
				event(e) {
					// 自定义事件监听
					console.log(e)
				},
				checked(e) {
					// 内置监听checkebox事件
					console.log(e)
				},
				switch(e) {
					console.log(e)
				},
				data
			})

			// 带边框
			$('#table3').table({
				border: 'qx-border', //表格带边框样式
				evenRowClass: 'qx-evenRow', //表格偶数行样式
				oddRowClass: 'qx-oddRow', //表格奇数行样式
				curRowClass: 'qx-curRow', //表格hover样式
				overflowHeight: '260px', //出现滚动条的高度
				titles: [
					{
						title: 'id',
						keyName: 'id',
						width: 80,
						checkBox: true
					},
					{
						title: '登录名',
						keyName: 'name'
					},
					{
						title: '邮箱',
						keyName: 'email'
					},
					{
						title: '角色',
						keyName: 'role'
					},
					{
						title: '加入时间',
						keyName: 'add_time'
					},
					{
						title: '状态',
						keyName: 'status',
						switch: true,
						width: 150
					},
					{
						title: '操作',
						keyName: 'control',
						width: 150,
						keysName: 'type', // 二维数组字段
						default:
							"<i data-event='edit' class='iconfont icon-edits'></i> <i data-event='remove' class='iconfont icon-remove'></i>"
					}
				],
				event(e) {
					// 自定义事件监听
					console.log(e)
				},
				checked(e) {
					// 内置监听checkebox事件
					console.log(e)
				},
				switch(e) {
					console.log(e)
				},
				data
			})

			// 保存已选数据
			var selected = []

			// 带折叠
			$('#table4').table({
				border: 'qx-border', //表格带边框样式
				evenRowClass: 'qx-evenRow', //表格偶数行样式
				oddRowClass: 'qx-oddRow', //表格奇数行样式
				curRowClass: 'qx-curRow', //表格hover样式
				overflowHeight: '560px', //出现滚动条的高度
				collapse: true, //是否支持折叠，默认false，对应数据pid（父级ID，一级pid则为-1）
				defaultClose: true, //是否默认折叠，默认false
				checkBox: true, //默认第一行是否存在checkbox，默认false，赋值true则折叠箭头显示第二行，否则第一行
				titles: [
					{
						title: 'id',
						keyName: 'id',
						width: 80,
						checkBox: true // 如折叠表格并且第一行存在checkbox则配置checkBox:true，箭头则显示第二行，否则第一行
					},
					{
						title: '登录名',
						keyName: 'name'
					},
					{
						title: '邮箱',
						keyName: 'email'
					},
					{
						title: '角色',
						keyName: 'role'
					},
					{
						title: '加入时间',
						keyName: 'add_time'
					},
					{
						title: '状态',
						keyName: 'status',
						switch: true,
						disabled: 'disabled' // disabled 禁用字段
					},
					{
						title: '审核',
						keyName: 'apply',
						switch: true,
						disabled: 'disabled2' // disabled 禁用字段
					},
					{
						title: '操作',
						keyName: 'control',
						// disabled: "disabled",       // disabled 禁用字段
						default: ''
					}
				],
				event(e) {
					if (e.event == 'remove') {
						// 成功回调封装
						base.success({
							code: 100000, // 请求状态
							msg: '删除成功', // 提示消息
							// parentRefresh: true     // 是否刷新父级（默认: false）
							// closeLayer: true,       // 关闭layer弹窗（默认: false）
							// link: '/',              // 跳转链接
							// refresh: true,          // 是否刷新（默认: false）
							remove: true, // 是否删除tr（默认: false）
							type: 'success', // 提示类型（默认: success）
							ele: e.tr // 当前tr
						})
					} else if (e.event == 'edit') {
						// 成功回调封装
						base.success({
							code: 100000, // 请求状态
							msg: '修改成功', // 提示消息
							// parentRefresh: true     // 是否刷新父级（默认: false）
							// closeLayer: true,       // 关闭layer弹窗（默认: false）
							// link: '/',              // 跳转链接
							// refresh: true,          // 是否刷新（默认: false）
							// remove: true,           // 是否删除tr（默认: false）
							type: 'success' // 提示类型（默认: success）
							// ele: e.tr               // 当前tr
						})
					}
					console.log(e)
				},
				checked(e) {
					console.log(e)
					// 清空数据
					selected = []
					// 已选元素，根据实际情况push字段
					for (let i of e) {
						selected.push(i.data.id)
					}
				},
				switch(e) {
					console.log(e)
				},
				data: data2
			})

			var base = new Base()

			// 搜索
			$('.qx-header .left button')
				.eq(0)
				.on('click', function () {
					var keyword = $(this).siblings().find('input').val()
					base.ajax({
						data: {
							keyword
						},
						url: 'upload.php',
						error(res) {
							console.log(res)
						},
						success(res) {
							console.log(res)
						}
					})
				})
			// 全选操作
			$('.qx-header .right button')
				.eq(0)
				.on('click', function () {
					$('#table4 input[name=AllChecks]').trigger('click')
				})
			// 批量删除
			$('.qx-header .right button')
				.eq(1)
				.on('click', function () {
					base.ajax({
						type: 'POST',
						data: {
							selected
						},
						successMsg: '批量删除成功！',
						errorMsg: '批量删除失败！',
						url: 'upload.php',
						error(res) {
							console.log(res)
						},
						success(res) {
							console.log(res)
						}
					})
				})
			// 全部折叠
			$('.qx-header .right button')
				.eq(2)
				.on('click', function () {
					$('#table4').collapseAll()
				})
			// 全部展开
			$('.qx-header .right button')
				.eq(3)
				.on('click', function () {
					$('#table4').expandAll()
				})
		</script>
	</body>
</html>
